<template>
  <div class="app-container">
    <h3 class="title">房型产品管理</h3>
    <div v-if="setPermissionBtn('/room/query/page', searchBtn)" class="inputBox">
      <el-input v-model="search.roomGoodsName" class="input" placeholder="房型名称查询" />
      <el-input v-model="search.roomSn" class="input" placeholder="请输入房型编号" />
      <!-- <el-input v-model="search.name" class="input" placeholder="请输入入会人查询" />
      <el-input v-model="search.phone" class="input" placeholder="请输入入会人手机号查询" /> -->
      <el-date-picker
        v-model="search.startTime"
        class="startDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择创建开始时间"/>
      <el-date-picker
        v-model="search.endTime"
        class="endDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择创建结束时间"/>
      <!-- <el-input v-model="search.saleName" class="input" placeholder="请输地推人员查询" /> -->
      <el-select v-model="search.saleStatus" placeholder="请选择状态">
        <el-option :value="''" label="全部" />
        <el-option label="上架" value="1" />
        <el-option label="下架" value="0" />
      </el-select>
      <el-button v-preventReClick type="primary" class="ml10" @click="toSearch">{{ searchBtn.btnName }}</el-button>
      <el-button type="primary" @click="toReset">重置</el-button>
    </div>
    <el-button v-if="setPermissionBtn('/room/add', addBtn)" type="primary" class="addBtn" @click="toaddPage()">{{ addBtn.btnName }}</el-button><br><br>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <template slot="empty">
        <div class="noData">暂无数据</div>
      </template>
      <el-table-column label="房型名称">
        <template slot-scope="scope">
          {{ scope.row.roomGoodsName }}
        </template>
      </el-table-column>
      <el-table-column label="缩略图" width="120">
        <template slot-scope="scope">
          <img :src="scope.row.picUrl" alt="" style="width:80px; height:60px; margin-left:10px">
        </template>
      </el-table-column>
      <el-table-column label="房型编号" width="120">
        <template slot-scope="scope">
          {{ scope.row.roomSn }}
        </template>
      </el-table-column>
      <el-table-column label="价格">
        <template slot-scope="scope">
          <p class="price">门市价: {{ scope.row.retailPrice }}</p>
          <p class="price">销售价: {{ scope.row.salePrice }}</p>
          <!-- <p class="price">提成比例: {{ scope.row.saleRebate }}</p> -->
          <!-- <p class="price">分销提成: {{ scope.row.rebate | formatNum }}</p> -->
          <!-- <p class="price">分销提成2: {{ scope.row.saleRebate * scope.row.salePrice | formatNum }}</p> -->
        </template>
      </el-table-column>
      <!-- <el-table-column label="有效期">
        <template slot-scope="scope">
          {{ scope.row.date1 }}
        </template>
      </el-table-column> -->
      <el-table-column label="更新日期">
        <template slot-scope="scope">
          {{ scope.row.updateTime || '暂无更新' }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ scope.row.saleStatus | statusStr }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="290px">
        <template slot-scope="scope">
          <el-button
            v-if="setPermissionBtn('/room/query/info', scope.row)"
            size="mini"
            value="查看"
            type="warning"
            @click="look(scope.row.id)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/room/edit/all', scope.row)"
            :disabled="scope.row.saleStatus === 1"
            size="mini"
            value="编辑"
            type="primary"
            @click="edit(scope.row.id)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/room/edit/saleStatus', scope.row)"
            :type="scope.row.saleStatus == 0?'success':'danger'"
            size="mini"
            value="上架/下架"
            @click="updateOnsale(scope.row.id, scope.row.saleStatus)"
            v-html="splitName(scope.row.btnName, scope.row.saleStatus)"/>
          <!-- <el-button
            v-if="scope.row.isOnSale === 0"
            size="mini"
            type="success"
            @click="updateOnsale(scope.row.id, 1)">上架</el-button>
          <el-button
            v-if="scope.row.isOnSale === 1"
            size="mini"
            type="success"
            @click="updateOnsale(scope.row.id, 0)">下架</el-button> -->
          <el-button
            v-if="setPermissionBtn('/room/del', scope.row)"
            :disabled="scope.row.saleStatus === 1"
            size="mini"
            type="danger"
            @click="toDelete(scope.row.id)">{{ scope.row.btnName }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { getRoomList, editRoom, editStatusRoom, delRoom } from '@/api/hotel'
import { Message } from 'element-ui'
export default {
  components: { Pagination },
  filters: {
    statusStr(status) {
      const statusMap = {
        0: '下架',
        1: '上架'
      }
      return statusMap[status]
    },
    formatNum(num) {
      console.log(num)
      //   console.log('取整上：', parseInt(num * 100) / 100)
      //   console.log('取整下：', parseInt(num * 100) / 100)
      return parseInt(num * 100) / 100
    }
  },
  data() {
    return {
      searchBtn: {},
      list: [],
      search: {
        roomGoodsName: '',
        roomSn: '',
        startTime: '',
        endTime: '',
        saleStatus: ''
      },
      total: 0,
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      listLoading: false,
      addBtn: {}
    }
  },
  computed: {
    formatNum(num) {
      return Math.floor(num * 100) / 100
    },
    // 是否显示按钮， 并显示按钮名称
    setPermissionBtn() {
      return function(str, row) {
        let index = -1
        const buttonList = this.$store.getters.button
        index = buttonList.findIndex(item => item.value === str)
        // console.log(index)
        if (index !== -1) {
          row.btnName = buttonList[index].name
          return true
        } else {
          return false
        }
      }
    },
    splitName() {
      return function(name, status) {
        // console.log('name:', name)
        // console.log('status:', status)
        const nameArr = name.split('/')
        if (status === 0) {
          return nameArr[0]
        } else {
          return nameArr[1]
        }
      }
    }
  },
  mounted() {
    this.fetchData()
    this.getPermissonFn() // 获取按钮权限 vuex的button
  },
  methods: {
    toaddPage() {
      this.$router.push({
        path: '/productManage/addRoom',
        query: {}
      })
    },
    toReset() {
      this.search.roomGoodsName = ''
      this.search.roomSn = ''
      this.search.startTime = ''
      this.search.endTime = ''
      this.search.saleStatus = ''
    },
    toSearch() {
      if (this.search.startTime && this.search.endTime) {
        const start = new Date(this.search.startTime).getTime();
        const end = new Date(this.search.endTime).getTime();
        if (start > end) {
          Message.error('结束时间必须大于开始时间')
          return false
        }
      }
      if (this.search.startTime && this.search.startTime.indexOf(' 00:00:00') === -1) this.search.startTime += ' 00:00:00'
      if (this.search.endTime && this.search.endTime.indexOf(' 23:59:59') === -1) this.search.endTime += ' 23:59:59'
      if (this.search.startTime && this.search.endTime) {
        const start = new Date(this.search.startTime).getTime();
        const end = new Date(this.search.endTime).getTime();
        if (start > end) {
          Message.error('结束时间必须大于开始时间')
          return false
        }
      }
      if (this.search.startTime) this.search.startTime = this.search.startTime
      if (this.search.endTime) this.search.endTime = this.search.endTime
      this.listLoading = true
      const newData = this.objectCon(this.listQuery, this.search)
      // console.log('商品列表搜索：', newData)
      getRoomList(newData).then(response => {
        if (response.code === '200') {
          this.list = response.data.list
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        }
      })
    },
    look(id) {
      const query = { isLook: true, id }
      this.$router.push({
        path: '/productManage/addRoom',
        query
      })
    },
    edit(id) {
      const query = { isEdit: true, id }
      this.$router.push({
        path: '/productManage/addRoom',
        query
      })
    },
    // 更新上架下架
    updateOnsale(id, type) {
      const strAsk = type === 0 ? '是否上架？' : '是否下架？'
      const str = type === 0 ? '已上架' : '已下架'
      this.$confirm(strAsk, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        type = type === 0 ? type = 1 : type = '0'
        const obj = { id, saleStatus: type }
        editStatusRoom(obj).then(res => {
          if (res.code === '200') {
            Message.success(str)
            this.fetchData()
          } else {
            Message.error(res.message + res.data)
          }
        })
      })
    },
    // 删除数据
    toDelete(id) {
      this.$confirm('您确定要删除此数据吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const obj = { id, status: 0 }
        delRoom(obj).then(res => {
          console.log(res)
          if (res.code === '200') {
            Message.success('已删除')
            this.fetchData()
          } else {
            Message.error(res.message + res.data)
          }
        })
        // Message.success('已删除')
        // this.fetchData()
      })
    },
    fetchData() {
      this.listLoading = true
      // const newData = this.objectCon(this.listQuery)
      getRoomList(this.listQuery).then(res => {
        if (res.code === '200') {
          console.log(res)
          this.list = res.data.list
          this.total = res.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          Message.error(res.message + res.data)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .inputBox{
    div{ margin-bottom: 10px;}
    .input:nth-of-type(1){ width: 160px }
    .input:nth-of-type(2){ width: 140px }
    .startDate, .endDate{ width: 180px }
    .el-select{width:120px}
  }
</style>
